import React, { useState } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input, Toast } from 'antd-mobile'
import '../Login/Login.less'
import Logo from '../../assets/img/logo.png'
import { reqregister } from '../../request/api'

function Register(props) {
  const [user, setUser] = useState({
    phone: '',
    nickname: '',
    password: ''
  })
// 注册
const doRegister=()=>{
  reqregister(user).then(res=>{
    if(res.data.code==200){
      Toast.show({
        content:res.data.msg
      })
      // 跳转的登录
      props.history.push('/login')
    }
  })
}
  return (
    <div className='login'>
      <Header title={'手机注册'} back></Header>
      <div className='form'>
        <img src={Logo} alt="" />
        <Form layout='horizontal'>
          <div>{JSON.stringify(user)}</div>
          <Form.Item label='用户名' >
            <Input placeholder='请输入用户名' clearable onChange={(e)=>setUser({...user,phone:e})}/>
          </Form.Item>
          <Form.Item label='昵称' >
            <Input placeholder='请输入昵称' clearable onChange={(e)=>setUser({...user,nickname:e})}/>
          </Form.Item>
          <Form.Item label='密码' >
            <Input placeholder='请输入密码' clearable type='password' onChange={(e)=>setUser({...user,password:e})}/>
          </Form.Item>
        </Form>
        <div>
          <Button block color='success' size='middle' onClick={()=>doRegister()}>
            注册
          </Button>
        </div>
      </div>
    </div>
  )

}

export default Register
